<template>
  <el-row :gutter="24">
    <el-col :span="6">
      <el-card style="width: 230px;height:130px;margin: 20px" :mouseenter="handleMouseEnter">
        <template #header>
          <div class="card-header">
              <span style="font-size: small;font-weight: bold">总 订 单 数</span>
          </div>
        </template>
        <el-row>
            <img src="public/order.png" style="width: 64px;height: 64px"/>
              <el-text class="mx-1" type="warning"  style="font-size: large;margin-left: 30px;" >{{order.value}}</el-text>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card style="width: 230px;height:130px;margin: 20px"  @mouseenter="handleMouseEnter">
        <template #header>
          <div class="card-header">
            <span style="font-size: small;font-weight: bold"> 总 收 入</span>
          </div>
        </template>
        <el-row>
          <img src="public/bill-in.png" style="width: 64px;height: 64px"/>
          &nbsp; &nbsp; &nbsp; &nbsp;
          <el-text class="mx-1" type="success"  style="font-size: large">{{billIn.value}}</el-text>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">

      <el-card style="width: 230px;height:130px;margin: 20px"  @mouseenter="handleMouseEnter">
        <template #header>
          <div class="card-header">
            <span style="font-size: small;font-weight: bold">总 支 出</span>
          </div>
        </template>
        <el-row>
        <img src="public/bill-out.png" style="width: 64px;height: 64px"/>
          &nbsp; &nbsp; &nbsp; &nbsp;
        <el-text class="mx-1" type="primary" style="font-size: large">{{billOut.value}}</el-text>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card style="width: 230px;height:130px;margin: 20px"  @mouseenter="handleMouseEnter">
        <template #header>
          <div class="card-header">
            <span style="font-size: small;font-weight: bold"> 客 户 量</span>
          </div>
        </template>
        <el-row>
        <img src="public/customer.png" style="width: 64px;height: 64px"/>
          &nbsp; &nbsp; &nbsp; &nbsp;
        <el-text class="mx-1" type="info"  style="font-size: large">{{customer.value}}</el-text>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <el-row :gutter="24">
    <el-col :span="8">
      <el-card style="width: 330px;height:250px;margin: 20px;">
        <div ref="mychart" id="demo"></div>
      </el-card>
      <el-card style="width: 330px;height:250px;margin: 20px">
        <div ref="mycharts2" id="mycharts2"></div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card style="width: 750px;height:520px;margin: 20px">
        <div ref="mychart1" id="mychart1"></div>
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
import * as echarts from "echarts"
import instance from "@/request.js";
import {formToJSON} from "axios";
import {ref, watch} from "vue";
export default {

  data(){
    return{
      order: ref({}),
      billIn: ref({}),
      billOut:ref({}),
      customer:ref({})
    }
  },
  created() {
    this.handleMouseEnter()

  },
  methods:{
    handleMouseEnter(){
      instance.get("/order/home").then(res=>{
        console.log(res)
        this.order.value=res.order
        this.billIn.value=res.billIn.toFixed(2)
        this.billOut.value=res.billOut.toFixed(2)
        this.customer.value=res.customer
      })
    }
  },



  mounted() {
    instance.get("/order/selectOrderByMonth").then( res => {
      let myEcharts=echarts.init(this.$refs.mychart)

      myEcharts.setOption({
        title:{
          subtext:"2023年每月订单报表",
          x:"center",
          subtextStyle:{
            fontSize:10

          },

          // borderWidth:5
        },
        legend:{
          show:true,
          left:"5%  "
        },
        tooltip:{
          trigger:"axis", //item图形触发
          axisPointer:{
            type:"cross" //line显示一个实现  shadow阴影效果  cross十字准星
          },
          backgroundColor:"#FAFAD2",
          borderColor:"#E6E6FA",
          borderWidth:5,
          textStyle:{
            color:"#696969"
          },
          formatter(params){
            for (var i=0;i<params.length;i++){
              return "当月订单量:"+params[i].data.value+"\n当前月份:"+params[i].data.date
            }
          },
        },
        xAxis:{
          data:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          //,"九月","十月","十一月","十二月"
        },
        yAxis:{
        },
        series:{
          name:"订单显示",
          type:"bar",
          data:res.data,
          barWidth:10,
          itemStyle:{
            normal:{
              color:function (params){
                let colorList=[
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                  "#0088A8",
                ]
                return colorList[params.dataIndex]
              }
            }
          }
        }
      })
    })
    instance.get("/bill/selectBillByMonth").then((res)=>{
      instance.get("/bill/selectBillByMoney").then((resf)=>{
        let myEcharts1=echarts.init(this.$refs.mychart1),
            option1 = {
              title:{
                subtext:"2023年每月账单报表",
                x:"center",
                subtextStyle: {
                  fontSize: 20
                }
              },
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                left:"left",
                orient:"verical",
                data: ['支出', '收入']
              },
              toolbox: {
                show: true,
                feature: {
                  dataView: { show: true, readOnly: false },
                  magicType: { show: true, type: ['line', 'bar'] },
                  restore: { show: true },
                  saveAsImage: { show: true }
                }
              },
              calculable: true,
              xAxis: [
                {
                  type: 'category',
                  // prettier-ignore
                  data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ],
              series: [
                {
                  name: '支出',
                  type: 'bar',
                  data:resf.data,
                  barWidth:10,
                  markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                  }
                },
                {
                  name: '收入',
                  type: 'bar',
                  data:res.data,
                  barWidth:10,
                  markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                  }
                }
              ]
            };
        myEcharts1.setOption(option1)
      })

    })
    instance.get("/goods/selectGoodsByQuantity").then((res)=>{
      let myEcharts2=echarts.init(this.$refs.mycharts2),
          option2 = {
            title: {
              subtext: '总类型订单数',
              left: 'center',
              subtextStyle: {
                fontSize: 20
              }
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '类型和订单数',
                type: 'pie',
                radius: '50%',
                data: res.data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
      myEcharts2.setOption(option2)

    })

  },




}

</script>

<style scoped>
#demo{
  width: 300px;
  height: 250px;
}
#mychart1{
  left: 10px;
  width: 650px;
  height: 500px;
}
#mycharts2{
  width: 300px;
  height: 250px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
</style>